<template>
    <div class="containerss">
        <Headers @returns="returns"/>
        <Header :picImg="picImg" :headText="headText"/>
        <Tag ref="Tag" @shows="shows" @show="show" :tags="tags" :description2="description2" :description3="description2"/>
        <List :songList="songList"/>
        <Comment :comment="comment" @clickLike="clickLike"/>
    </div>
</template>

<script>
import { SongListHead, SongListBody, songListGreat } from '../../../api/recommendMusic'
import Headers from '../common/header'
import Header from './components/header'
import Tag from './components/tag'
import List from './components/list'
import Comment from './components/comment'
export default {
    data() {
        return {
            picImg: '',
            headText:'',
            tags: [],
            description: [],
            description2: [],
            description3: [],
            flag: true,
            showTag: false,
            songList: [],
            arr: [],
            authors: '',
            comment: [],
            listId: '',
            commentId:'',
            comments: []
        }
    },
    mounted() {
        SongListHead(this.$route.params.id).then(res => {
            let data = res.data.playlist
            this.listId = data.id
            this.picImg = data.coverImgUrl
            this.headText = data.name
            this.tags = data.tags
            data.tracks.map((item,index) => {
                let obj = {
                    name: '',
                    author: '',
                    id: '',
                    picUrl: ''
                }
                obj['name'] = item.name
                obj['id'] = item.id
                obj['picUrl'] = item.al.picUrl
                this.arr = []
                item.ar.map((item,index) => {
                   this.arr.push(item.name)
                   
                   this.authors = this.arr.join('/')
                })
                
                obj['author'] = this.authors
                this.songList.push(obj)
            })
            this.description = data.description.split('\n')
            if (this.description.length > 3) {
                this.description2 = this.description.slice(0,3)
                this.description3 = this.description.slice(3)
                this.description2[0] = '简介:' + this.description2[0]
            }
            else {
                this.$refs.Tag.showss()
                this.description2 = this.description
                this.description2[0] = '简介:' + this.description2[0]
            }
        })
        SongListBody(this.$route.params.id).then(res => {
            let {data: {comments}} = res
            this.comments = comments
            comments.map((item,index) => {
                let times = item.time.toString().slice(0,10)
                let obj = {
                    name: '',
                    Image: '',
                    likeCount: 0,
                    time: '',
                    content: ''
                }
                obj['time'] = this.time(Number(times))
                obj['name'] = item.user.nickname
                obj['Image'] = item.user.avatarUrl
                obj['content'] = item.content
                item.likedCount ? obj['likeCount'] = item.likedCount : obj['likeCount'] = ''
                this.comment.push(obj)
            })
        })
    },
    methods: {
        show() {
            if (this.flag) {
                this.description2 = this.description2.concat(this.description3)
            }
            else {
                this.description2 = this.description.slice(0,3)
                this.description2[0] = '简介:' + this.description2[0]
            }
            this.flag = !this.flag
        },
        shows(shows) {
            shows ? this.$refs.Tag.shows = false : ''
        },
        time(timeStr) {
            var date = new Date(timeStr)
            var year = date.getFullYear()
            var yue = date.getMonth() + 1
            var ri = date.getDate()
            var hour = date.getHours()
            var minutes = date.getMinutes()
            var seconds = date.getSeconds()
            if (yue < 10) {
                yue = '0' + yue
            }
            if (ri < 10) {
                ri = '0' + ri
            }
            if (hour < 10) {
                hour = '0' + hour
            }
            if (minutes < 10) {
                minutes = '0' + minutes
            }
            if (seconds < 10) {
                seconds = '0' + seconds
            }
            return `${year}年${yue}月${ri}日 ${hour}:${minutes}`
            // return year + '年' + yue + '月'
        },
        clickLike(index) {
            console.log(this.comments)
            let likeStatus = this.comments[index].status
            let cid = this.comments[index].commentId
            if (likeStatus === 0) {
                songListGreat(this.listId, cid, '1', '2').then()
            }
            else {
                songListGreat(this.listId, cid, '0', '2').then()
            }
        },
        returns() {
            this.$router.push('/')
        }
    },
    components: {
        Header,
        Tag,
        List,
        Comment,
        Headers
    }
}
</script>

<style lang="scss" scoped>
.containerss {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow-x: hidden;
}
</style>